<!DOCTYPE html>
<html lang="zh">

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
	</head>

	<body>
		<!-- 这个写法不可以在这里写 -->
		<!-- 	<div id="app">
			<div>
				<student />
				<hr>
				<school />
			</div>
		</div>
		 -->


	<!-- Vue中使用组件的三大步骤:
			一、定义组件(创建组件)
			二、注册组件
			三、使用组件(写组件标签)
			
		一、如何定义一个组件?
			使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，
			但也有点区别;区别如下:
			1,el不要写，为什么?—最终所有的组件都要经过一个vm的管理,由vm中的el决定服务哪个容器。
			2.data必须写成函数，为什么?——避免组件被复用时，数据存在引用关系。
			备注:使用template可以配置组件结构。
			
		二、如何注册组件?
		 1。局部注册:靠new Vue的时候传入components选项
		 2.全局注册:靠Vue.component('组件名’,组件)
		 
		三、编写组件标签:
		 <school></school> -->
		<div id="app">
			<div>
				<hool></hool>
				<student></student>
				<hr>
				<student></student>
			</div>
		</div>

		<script src="../../vue.js"></script>
		<script>
			//https://www.bilibili.com/video/BV1Zy4y1K7SH/?p=54&spm_id_from=pageDriver&vd_source=0f8cb211b0f54d811ff9415b84db28b5
			//创建school组件
			const school = Vue.extend({
				template: `<div><h2>学校名称：{{name}}</h2>
		<h2>学校地址：{{address}}</h2></div>`,
				data: function() {
					return {
						name: "白云学校",
						address: "广州白云"
					}
				},

			});

			const student = Vue.extend({
				template: `<div><h2>学生姓名：{{name}}</h2>
		<h2>学生年龄：{{age}}</h2></div>`,
				data: function() {
					return {
						name: "小吴同志",
						age: 22
					}
				}
			});

			const hool = Vue.extend({
				template: `<h1>你好？{{name}}</h1>`,
				data() {
					return {
						name: '5555',
					};
				},
			});
			//第二步:全局注册组件
			Vue.component('hool', hool);
			//创建vm
			new Vue({
				el: '#app',
				//第二步:注册组件（局部注册)
				components: {
					school: school,
					student: student
				},
				// 	template:`<div>
				// 	<hool/>
				// 	<student/>
				// 	<hr>
				// 	<school/>
				// </div>`,
			});
			//54
		</script>
	</body>

</html>
